import React,{ PureComponent } from 'react'
import { DownloadWrapper } from '../styled'
import { connect } from 'react-redux'
import { actionCreater } from '../store'

class DownloadApp extends PureComponent{
    render(){
        const { imgShow, handleMouseEnter, handleMouseLeave } = this.props
        return <div>
            <DownloadWrapper onMouseEnter={handleMouseEnter} onMouseLeave={handleMouseLeave}>
                <img
                    className='download-pic1'
                    src="https://ebaygirl.com/jianshu/code.png"
                    alt=""
                />
                <div className='download-right'>
                    <div className='title'>
                        下载简书手机App >
                    </div>
                    <div className='desc'>
                        随时随地发现和创作内容
                    </div>
                </div>
                <img className={!imgShow? 'imgHide download-pic2':'download-pic2' }
                    src="https://ebaygirl.com/jianshu/code.png"
                     alt=""/>
            </DownloadWrapper>
        </div>
    }
}
const mapState = (state)=> ({
    imgShow: state.getIn(['home','imgShow'])
})
const mapDispatch = (dispatch)=> ({
    handleMouseEnter(){
        dispatch(actionCreater.getMouseEnterAction(true))
    },
    handleMouseLeave(){
        dispatch(actionCreater.getMouseEnterAction(false))
    }
})
export default connect(mapState,mapDispatch)(DownloadApp)
